<template>
    <transition name="fade">
      <div v-if="visible" class="toast" :style="{ top: `${top}px` }">
        <div class="toast-content">{{ message }}</div>
      </div>
    </transition>
  </template>
  
  <script>
  export default {
    data() {
      return {
        visible: false,
        message: '',
        duration: 3000, // 默认显示3秒
        top: 20
      };
    },
    methods: {
      show(message, duration = 3000, top = 20) {
        this.message = message;
        this.duration = duration;
        this.top = top;
        this.visible = true;
  
        setTimeout(() => {
          this.visible = false;
        }, this.duration);
      }
    }
  };
  </script>
  
  <style scoped>
  .toast {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    z-index: 9999;
  }
  
  .toast-content {
    font-size: 16px;
  }
  
  .fade-enter-active, .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
  </style>
  